<template>
  <div class="poptipContent">
    <div class="poptipContent">
      <span>跟进&批注</span>
    </div>
    <div class="loadingBox"> 
      <Spin size="large" fix v-if="popLoading" class="spinBox">
      </Spin>
      <div
        style="max-height: 300px; min-height: 40px; overflow-y: auto"
        v-if="followUpList && followUpList.length > 0"
      >
        <Timeline>
          <TimelineItem v-for="item in followUpListCon">
            <p class="time">
              <span>{{ timeSub(item.operationTime) }}</span
              ><span>
                {{ item.category == "12" ? "批注人" : "跟进人" }}：{{
                  item.operatorName
                }}</span
              >
            </p>
            <p class="content">
              {{ item.gistRemark }}
            </p>
          </TimelineItem>
        </Timeline>
      </div>
      <div style="text-align: center" v-else>该客户暂无跟进或批注</div>
    </div>
    <!-- <div class="goFollow" @click="goFollow">
      查看全部{{ followUpLen }}条跟进
    </div> -->
    <div v-if="unlocking('客户管理', '5000035')">
      <!-- <Divider /> -->
      <Button
        type="primary"
        size="small"
        class="M_comments"
        @click="commentsClick"
        >添加批注</Button
      >
    </div>

    <Modal
      v-model="modalFlag"
      @on-cancel="addCancel"
      confirm
      :footer-hide="true"
      title="添加批注"
    >
      <Input
        v-model="textCon"
        maxlength="300"
        show-word-limit
        type="textarea"
        placeholder="请添加批注内容，不超过300字"
        :rows="4"
        @on-cancel="addCancel"
      />

      <div class="transferFooter">
        <Button @click="addCancel">取消</Button>
        <Button type="info" @click="addSave">确定</Button>
      </div>
    </Modal>
  </div>
</template>

<script>
import { insertFollowUp } from "@/api/customerManagement.js";
import tool from "@/common/tool";
export default {
  props: ["followUpList", "popData", "cityCode","popLoading"],
  data() {
    return {
      // followUpListCon: [],
      // followUpLen: 0,
      modalFlag: false,
      textCon: "",
      spinShow:true
    };
  },
  methods: {
    addCancel() {
      this.textCon = "";
      this.modalFlag = false;
    },
    addSave() {
      if (this.textCon == "") {
        this.$Message.warning("请输入批注内容。");
        return false;
      }

      let params = {
        buildingId: JSON.parse(this.$tool.getStorage("caseBuildingId")),
        createrId: JSON.parse(tool.getStorage("userMess")).userId,
        userId: JSON.parse(tool.getStorage("userMess")).userId,
        customerId: this.popData.customerId,
        followUp: 1,
        followUpType: 4,
        userCustomerId: this.popData.userCustomerId,
        remark: this.textCon,
      };
      insertFollowUp(params)
        .then((res) => {
          this.$Message.success("添加批注成功。");
          this.$emit("initList");
          this.addCancel();
        })
        .catch((err) => {
          this.$Message.error(err);
        });
    },
    commentsClick() {
      this.modalFlag = true;
      this.$emit("popClose");
    },

    timeSub(time) {
      return time.substring(0, time.length - 3);
    },

    // goFollow() {
    //   this.$router.push({
    //     path: "/customerManagement_center/allCustomers/details",
    //     query: {
    //       customerId: this.popData.customerId,
    //       userCustomerId: this.popData.userCustomerId,
    //       buildingId: JSON.parse(this.$tool.getStorage("caseBuildingId")),
    //       id: this.popData.customerId,
    //       cityCode: this.cityCode,
    //     },
    //   });
    // },
  },

  computed: {
    followUpListCon() {
      if (this.followUpList && this.followUpList.length) {
        return this.followUpList.slice(0, 3);
      }      
    },
  },

  
};
</script>

<style lang="scss" scoped>
.poptipContent {
  // background: rgba(235, 247, 255, 1);
  .poptipContent {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin: 10px 0 20px;
    .close {
      color: #2b85e4;
      cursor: pointer;
    }
  }

  .time {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    color: #999;
  }
  .content {
    margin-top: 5px;
  }
}
.transferFooter {
  margin-top: 20px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  button {
    width: 80px;
    margin: 0 10px;
  }
}
.loadingBox{
  position: relative;
}
</style>
<style>
.popClass {
  display: none;
}
.M_poptip {
  position: relative;
}
.M_poptip .ivu-poptip-inner {
  background: rgba(235, 247, 255, 1);
}
/* .M_poptip .ivu-poptip-footer .ivu-btn-text{
  display: none !important;
} */
.M_poptip .ivu-icon-ios-help-circle:before {
  display: none;
}
.M_poptip .ivu-btn-text {
  position: absolute;
  top: 30px;
  right: 10px;
  color: #0f42a7;
}

.M_poptip .ivu-poptip-footer .ivu-btn-primary {
  background: none;
  border: none;
  color: #0f42a7;
}

/* .ivu-table-fixed-body{
   position: initial;
} */
.M_comments {
  position: absolute;
  bottom: 24px;
  left: 33px;
}
.spinBox{
  background: rgba(235, 247, 255, 1);
}
</style>

